<template>
  <div>
    {{ areaNames }}
  </div>
</template>
<script>
import { getAllConfigArea } from '@/api/shopDesignTask'
let areas = []
getAllConfigArea().then(res => {
  areas = res.data
})
export function getAreas() {
  return areas
}
export function getAreaName(value) {
  let codes = []
  if (typeof value === 'string') {
    codes = value.split(',').filter(e => e !== '' && e !== undefined)
  } else if (value instanceof Array) {
    codes = value
  }
  const t = new Set()
  for (const item of areas) {
    if (codes.includes(item.areaCode)) {
      t.add(item.areaName)
    }
  }
  return t.size > 0 ? Array.from(t).join(',') : codes.join(',')
}
export default {
  name: 'CDesignArea',
  props: {
    value: {
      type: [String, Array],
      default: ''
    }
  },
  data() {
    return {
      areaNames: ''
    }
  },
  watch: {
    value: {
      handler(v) {
        this.areaNames = getAreaName(v)
      },
      immediate: true
    }
  },
  created() {
    if (areas.length === 0) {
      this.getAllConfigArea()
    }
  },
  methods: {
    getAllConfigArea() {
      getAllConfigArea().then(res => {
        areas = res.data
        getAreaName()
      })
    }
  }
}
</script>
